<!DOCTYPE html>
<html>
<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>${title!"艺术上海"}</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="${keywords?if_exists}" />
    <meta name="description" content="${description?if_exists}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/font-face.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/font-face.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/works/index.css" rel="stylesheet" />
    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/js/swiper/swiper.min.css" rel="stylesheet" />
    <link href="/static/js/owl/owl.carousel.css" rel="stylesheet" />
    <link href="/static/js/owl/owl.theme.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="/static/img/icon.png"/>
    <style>
        #owl-demo a.item {
            width: 100%;
            height: 470px;
            display: block;
            background-position: center center;
            background-size: cover;
        }
        .container-index{
            width: 1200px;
            margin: 0 auto;
            margin-bottom: 30px;
            margin-top: 40px;
        }
        .section-index-header{
            margin-bottom: 20px;
        }
        .section-index-header h2{
            font-size: 26px;
            line-height: 32px;
            font-weight: 400;
        }

        .section-index-actitiy{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 40px;
            flex-wrap: wrap;
        }
        .section-index-actitiy-item{
            width: 580px;
            height: 340px;
            background: #eee;
            margin-bottom: 40px;
        }

        .section-index-actitiy-item img{
            width: 580px;
            height: 340px;
            object-fit: cover;
        }
    </style>
</head>
<body>

<!-- header -->
<@netCommon.commonHeader "线上博览会" menu i18n/>

<#if exOlineBanner??>
<div id="owl-demo" class="owl-carousel" style="margin-top: 120px">
        <#list exOlineBanner as items>
            <a class="item" href="${items.url}" target="_blank" style="background-image:url(${items.image})"></a>
        </#list>

</div>

</#if>


<div class="container-index">
    <section class="section-index">
        <div class="section-index-header">
            <h2>${exOlineIndex.title!''}</h2>
            <p>${exOlineIndex.des!''}</p>
        </div>
        <div class="section-index-bodyer">
            <div class="section-index-actitiy">
                <#list expo.data.records as item>
                <div class="section-index-actitiy-item">
                    <a href="/exhibition/exdetail?expoNo=${item.id}" target="_blank"> <img src="${item.imgs}"></a>
                </div>
                </#list>
            </div>
        </div>
    </section>
</div>

<!-- footer -->

<!-- script -->
<@netCommon.commonScript />

<script type="text/javascript" src="/static/js/owl/owl.carousel.js"></script>

<script>
    $(function () {
        $('#owl-demo').owlCarousel({
            items: 1
        });
    })
</script>


<@netCommon.commonFooter footer friendLink copyright i18n/>



</body>
</html>
